<style scoped>
 .pay{
   margin-left: 19%;
   margin-top: 5%;
 }
 .pay .item {
   margin-bottom: 3%; /* 设置表单项之间的下边距 */
 }
 .container{
   margin-top: -1%;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: 75px;
   height: 60px;
 }
 .money{
  border: #e5e5e5 solid 1px;
   color: rgba(74, 78, 84, 0.96);
   text-align: center;
   width: 78px;
   height: 40px;
 }
 .other{
   color: rgba(74, 78, 84, 0.96);
   text-align: center;
   width: 128px;
   height: 40px;
 }
 .limitLen{
   width: 700px;
 }
 .selected {
   border: 1px solid red; /* 添加红色边框样式 */
 }
.cen{
  margin-left: 40%;
}
.text-pay{
  margin-left: -18%;
  margin-bottom: 5%;
  font-size: 20px;

}
.pays{
  font-size: 20px;
}
.text-agree{
  font-size: 18px;
  color: black;
}
</style>

<template>
  <div class="pay">
    <el-dialog
      title="在线支付"
      :visible.sync="dialogVisible"
      width="50%"
      >
      <div class="cen">
                <div class="text-pay">请使用支付宝扫码进行支付,支付请在30分钟内完成</div>
        <div class="code">
        <vue-qr
                ref="qrCode"
                :text="textValue"
                :logoScale="40"
                :size="190"
                :margin="10"
        />
      </div>




<!--        <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.L8dMfJ3qPHnJKNy6pqro7wHaHa?w=198&h=198&c=7&r=0&o=5&pid=1.7" alt="">-->
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" v-loading="this.loading">
  <el-form-item label="金额" class="item">
    <div class="container" >
      <div :class="{ 'money': true, 'selected': ruleForm.money === 20 }" @click="selectMoney(20)">20</div>
      <div :class="{ 'money': true, 'selected': ruleForm.money === 50 }" @click="selectMoney(50)">50</div>
      <div :class="{ 'money': true, 'selected': ruleForm.money === 100 }" @click="selectMoney(100)">100</div>
      <div class="other">
       <el-input placeholder="自定义金额" v-model="ruleForm.otherMoney" @focus="ruleForm.money = ruleForm.otherMoney"></el-input>
      </div>
    </div>
  </el-form-item>
<el-form-item label="捐款人/企业" prop="name" class="item">
  <el-input v-model="ruleForm.name" class="limitLen"></el-input>
</el-form-item>
<el-form-item label="捐助灾情" prop="region" class="item">
  <el-select v-model="ruleForm.region" placeholder="请选择灾情">
    <el-option label="汶川大地震" value="shanghai"></el-option>
    <el-option label="广西洪水" value="beijing"></el-option>
  </el-select>
</el-form-item>
<el-form-item label="联系方式" prop="phone" class="item">
  <el-input class="limitLen" v-model="ruleForm.phone"></el-input>
</el-form-item>
<el-form-item label="是否匿名" prop="resource" class="item">
  <el-radio-group v-model="ruleForm.isHidden">
    <el-radio :label="1">是</el-radio>
    <el-radio :label="0">否</el-radio>
  </el-radio-group>
</el-form-item>
<el-form-item label="给他们的话" prop="word" class="item">
  <el-input type="textarea" class="limitLen" v-model="ruleForm.word"></el-input>
</el-form-item>
  <el-form-item class="item">
    <el-checkbox v-model="ruleForm.agree">我已同意了解</el-checkbox><span style="color: #e5206f" @click="dialog = true">&lt;&lt;捐赠协议&gt;&gt;</span>
  </el-form-item>
<el-form-item class="item">
  <el-button type="primary" @click="submit">确认捐款</el-button>
  <el-button >重置</el-button>
</el-form-item>
</el-form>
    <div class="text-agree" data-app="true">
      <v-row justify="center">
        <v-dialog
          v-model="dialog"
          width="600px"
          class="text-agree"
        >
          <v-card>
            <v-card-title>
              <span class="text-h5" style="font-size: 30px;background: #ff5900 ;color: white" >捐助协议</span>
            </v-card-title>
            <v-card-text style="color: black;font-size: 18px">
              <h3 style="text-align: center;margin-bottom: 40px">网站捐赠协议</h3>
              声明：捐赠人对所捐赠的善款（物）持有所有权，属自愿行为。<br>
              <br>
              承诺：您所捐赠的每一份善款（物），将全额用于系统开展的公益慈善项目，无需承担网站的任何管理成本。<br>
              <br>
              1、捐赠来源：<br>
              <br>
              捐赠人捐赠的财产，是其有权处分的合法财产，且权属关系无争议。<br>
              <br>
              2、捐赠用途：<br>
              <br>
              本网站所收到的所有捐赠财产将按捐赠人要求（明确使用方向、实施项目和受益人、捐助地区）用于本机构指定项目，未经捐赠人同意，不会改变捐赠财产的用途；捐赠人未作指定要求的捐赠财产，将作为非限定捐赠用于任何需要项目。<br>
              <br>
              捐赠7日之内可根据情况酌情调整捐赠用途，7日之后则不再变更。<br>
              <br>
              3、权利义务：<br>
              <br>
              1）捐赠人有权向本网站查询捐赠财产的使用及管理情况，并提出意见和建议。对于捐赠人的查询，本网站会如实答复。如出现违反捐赠要求使用捐赠财产的情况，捐赠人有权要求履行捐赠要求或者撤销捐赠行为。<br>
              <br>
              2）捐赠人对捐赠行为、捐赠财产和其他有关事项要求保密的，本网站将予以保密。<br>
              <br>
              3）捐赠行为发生之后，捐赠人可向本机构索取合法、有效的捐赠凭证。<br>
              <br>
              4）、捐赠行为发生之后，本系统将按要求与捐赠人补签捐赠协议。<br>
              <br>
              4、其他约定<br>
              <br>
              对捐赠人已捐出的捐赠财产，都视为本机构的捐赠收入，任何情况下本网站不作任何退还或返还补偿。<br>
              <br>
              5、法律的适用和管辖：<br>
              <br>
              基本声明的生效、履行、解释及争议的解决均适用中华人民共和国法律。如果本声明的任何条款因与中华人民共和国现行法律相抵触而无效，该等无效不影响其他条款的效力。<br>

            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
<!--              <v-btn-->
<!--                color="green darken-1"-->
<!--                text-->
<!--                @click="dialog = false"-->
<!--              >-->
<!--                Disagree-->
<!--              </v-btn>-->
              <v-btn
                rounded
                color="primary"
                dark
                @click="dialog = false"
              >
                确定
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    </div>

  </div>

</template>
<script>

import VueQr from 'vue-qr'
import {genOrder, test} from "@/api/pay/order";
export default {
  components: {VueQr},
  data() {
    return {
      // logoPath:logoImg,
      // 或者用require()来导入
      // logoPath: require('@/assets/logo.png'),
      textValue: 'https://bugstack.cn/md/netty/base/2019-07-30-netty%E6%A1%88%E4%BE%8B%EF%BC%8Cnetty4.1%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8%E7%AF%87%E9%9B%B6%E3%80%8A%E5%88%9D%E5%85%A5JavaIO%E4%B9%8B%E9%97%A8BIO%E3%80%81NIO%E3%80%81AIO%E5%AE%9E%E6%88%98%E7%BB%83%E4%B9%A0%E3%80%8B.html',
      dialogVisible: false,
      dialog: false,
      agreeText: false,
      loading:false,
      ruleForm: {
        name: '',
        money: '',
        otherMoney:'',
        phone: '',
        delivery: false,
        type: [],
        resource: '',
        word: '',
        agree: false,
        isHidden: ''
      },
      rules: {
        name: [
          {required: true, message: '请输入个人或企业姓名', trigger: 'blur'},
        ],
        region: [
          {required: true, message: '请选择活动区域', trigger: 'change'}
        ],
        date1: [
          {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
        ],
        date2: [
          {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
        ],
        type: [
          {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
        ],
      }
    };
  },
  methods: {

    selectMoney(money) {
      this.ruleForm.money = money
    },
   async submit(){
     this.loading = true
     console.log(this.ruleForm.isHidden+"adasdasdads")
      if(this.ruleForm.name!==''&&this.ruleForm.money+this.ruleForm.otherMoney!==''&&this.ruleForm.phone!==''&&this.ruleForm.isHidden!==''){
        test().then(resp => {
          console.log(resp.data)
        })
        await genOrder(this.ruleForm).then(
          res=>{
             console.log(res.data)
             this.textValue = res.data
            setTimeout(() => {
              this.$message.success("支付成功")
              this.dialogVisible = false; // 关闭对话框
              // 执行跳转操作，这里假设跳转到名为"targetRoute"的路由
              // this.$router.push({ name: 'targetRoute' });

            }, 7000); // 10秒后执行
          }
        )
        this.loading = false
        this.dialogVisible  = true;
      }
      else{
        this.$message.error("请将必要信息填写完整")
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    }

    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert('submit!');
    //     } else {
    //       console.log('error submit!!');
    //       return false;
    //     }
    //   });
    // },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // }

  }
}
</script>
